JavaScript Source Code 2002: Page Details: Resizable Viewer

Home

Resizable Viewer

Displays a small 'image loading' picture while the main image is loading. When the image completes, the viewer window is appropriately resized, centered on the screen, and 'image loaded' is displayed. Neat!

Pic 1 Pic 2

JavaScript Source Code 2002: Page Details: Resizable Viewer
Simply click inside the window below, use your cursor to highlight the script, and copy (type Control-c or Apple-c) the script into a new file in your text editor (such as Note Pad or Simple Text) and save (Control-s or Apple-s). The script is yours!!!

   arImageSrc = new Array ("loading.gif","loaded.gif"); arImageList = new Array (); for (counter in arImageSrc) { arImageList[counter] = new Image(); arImageList[counter].src = arImageSrc[counter]; } var height = screen.height; var width = screen.width; var leftpos = width / 2 - 50; var toppos = height / 2 - 50; function encode(str){ // Netscape fix thanks to Cyanide_7 return escape(str.replace(/ /g,'+')); } function view(what) { var url = 'viewer.html?pic='+encode(what); window.open(url,'WIN','scrollbars=no,status=no,toolbar=no,resizable=1,location=no,menu=no,width=100,height=100,left=' + leftpos + ',top=' + toppos); } function getParams() { var idx = document.URL.indexOf('?'); var params = new Array(); if (idx != -1) { var pairs = document.URL.substring(idx+1, document.URL.length).split('&'); for (var i=0; i<pairs.length; i++) { nameVal = pairs[i].split('='); params[nameVal[0]] = nameVal[1]; } } return params; } params = getParams(); function resize() { if (eval(pic).height) { var name = navigator.appName if (name == "Microsoft Internet Explorer") { myHeight = eval(pic).height + 40; myWidth = eval(pic).width + 12; } else { myHeight = eval(pic).height + 9; myWidth = eval(pic).width; } clearTimeout(); var height = screen.height; var width = screen.width; var leftpos = width / 2 - myWidth / 2; var toppos = height / 2 - myHeight / 2; self.moveTo(leftpos, toppos); self.resizeTo(myWidth, myHeight); document.il.src = 'loaded.gif'; } else setTimeOut(resize(), 100); }   <html> <head> <script language="javascript" src="resizableViewer.js"></script> </head> <body topmargin="0" leftmargin="0" marginheight="0" marginwidth="0" bgcolor="#FFFFFF"> <img border="0" src="loading.gif" width="100" height="9" name="il" onload="window.focus()"> <br> <SCRIPT LANGUAGE="JavaScript">  </script> </body> </html>  <head> <script language="javascript" src="resizableViewer.js"></script> </head>  <body> <center> <a href="javascript:view('cotton.jpg')">Pic 1</a> <a href="javascript:view('michael.jpg')">Pic 2</a> </center> </body>    <p><center> <font face="arial, helvetica" SIZE="-2">Free JavaScripts provided<br> by <a href="http://javascriptsource.com">JavaScript Source Code 2002</a></font> </center><p>